<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar title="点位信息"></navbar>
		<view class="main-cont" :style="{height: pageHeight}">
			<!-- 冷间切换 -->
			<view class="device-select" @click="handleOpen">
				<view class="device-name">{{deviceName}}</view>
				<image class="device-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'"></image>
			</view>
			<!-- 点位信息 -->
			<scroll-view scroll-y refresher-enabled :refresher-triggered="isRefresh"
				@refresherrefresh="handlePullDownRefresh">
				<view class="point-list">
					<view class="point-list-item" v-for="(item, index) in pointList" :key="index" @tap="toAdd(0,item)">
						<image class="point-list-item-arrow" src="/static/right_arrow.png"></image>
						<view class="point-list-item-h">
							<text class="point-list-item-h-name">开始点位：</text>
							<text class="point-list-item-h-value">{{item.startpoint}}</text>
						</view>
						<view class="point-list-item-h">
							<text class="point-list-item-h-name">结束点位：</text>
							<text class="point-list-item-h-value">{{item.endpoint}}</text>
						</view>
						<view class="point-list-item-h">
							<text class="point-list-item-h-name">上限数值：</text>
							<text class="point-list-item-h-value">{{item.startvalue}}</text>
						</view>
						<view class="point-list-item-h">
							<text class="point-list-item-h-name">下限数值：</text>
							<text class="point-list-item-h-value">{{item.endvalue}}</text>
						</view>
						<view class="point-list-item-h">
							<text class="point-list-item-h-name">开始时间：</text>
							<text class="point-list-item-h-value">{{item.starttime}}</text>
						</view>
						<view class="point-list-item-h">
							<text class="point-list-item-h-name">结束时间：</text>
							<text class="point-list-item-h-value">{{item.endtime}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 按钮 -->
			<view class="btn-cont">
				<view class="btn-update" @tap="toAdd(1,null)">添加点位</view>
			</view>
		</view>
		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in deviceList" :key="index"
					@click="handleDeviceChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>

	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, computed, watch, getCurrentInstance, onMounted } from 'vue';
	import { storeToRefs } from 'pinia';
	import useThemeStore from '@/store/theme';
	import useHomeStore from '@/store/home';
	import { useNavbar } from "@/utils/hooks.js";
	import { getProjectConfList } from "@/api/home.js";
	const themeStore = useThemeStore();
	const homeStore = useHomeStore();
	const { pageHeight } = useNavbar();
	const { projectId, deviceId, deviceName, deviceType, deviceList, projectModus, projectType } = storeToRefs(homeStore);
	const popup = ref()
	const isOpen = ref(false)
	const isRefresh = ref(false)

	const pointList = ref([])

	onMounted(() => {
		getData();
	})

	uni.$on('point-refresh-list', () => {
		getData()
	})


	const getData = () => {
		let params = {
			mid: projectId.value,
			type: 20,
			oid: deviceId.value
		}
		getProjectConfList(params).then(res => {
			pointList.value = res.data;
			// pointList.value.push(...res.data);

			isRefresh.value = false;
		});
	}

	const toAdd = (type, ponit) => {
		if (ponit) {
			homeStore.setPointInfo(ponit)
		}
		uni.navigateTo({
			url: `/pages/home/point-detail?type=${type}`
		})
	}

	const handlePullDownRefresh = () => {
		isRefresh.value = true;
		getData();
	}

	// 下拉选择设备
	const handleOpen = () => {
		isOpen.value = true;
		popup.value.open();
	}
	// 设备切换
	const handleDeviceChange = (item) => {
		isOpen.value = false;
		popup.value.close();
		homeStore.setDeviceId(item.id);
		homeStore.setDeviceName(item.name);
		// getData();
	}
</script>

<style lang="scss" scoped>
	.page-cont {
		position: relative;

		.main-cont {
			position: relative;
			// padding-bottom: 80px;
			align-items: center;

			.point-list {
				position: relative;
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 20rpx;
				margin-bottom: 150rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 30rpx;


				.point-list-item {
					// margin-top: 20rpx;
					display: flex;
					flex-direction: column;
					padding: 10rpx;
					padding-left: 25rpx;
					padding-right: 25rpx;
					padding-bottom: 20rpx;
					border-radius: 5px;
					background: linear-gradient(180deg, rgba(238, 240, 249, 1), #fff);
					border: 1px solid #fff;
					box-shadow: 0px 10rpx 20rpx 0px rgba(95, 131, 249, 0.1);
					box-sizing: border-box;


					.point-list-item-arrow {
						position: relative;
						width: 15px;
						left: 90%;
						top: 15rpx;
						height: 14px;
					}

					.point-list-item-h {
						display: flex;
						position: relative;
						flex-direction: row;
						margin-top: 10rpx;
						top: -15rpx;

						.point-list-item-h-name {
							color: #999;
							font-size: 25rpx;
						}

						.point-list-item-h-value {
							color: #333;
							font-size: 25rpx;
						}
					}
				}
			}

			.device-select {
				height: 40px;
				line-height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: transparent;
				border-bottom: 1px solid #ccc;

				.device-name {
					color: #666;
					font-size: 14px;
				}

				.device-arrow {
					padding-left: 10px;
					width: 16px;
					height: 16px;
				}
			}

			.btn-cont {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 10px;

				.btn-update {
					height: 50px;
					line-height: 50px;
					color: #fff;
					font-size: 14px;
					text-align: center;
					border-radius: 5px;
					background-color: $theme-color;
				}
			}
		}

		.popup-cont {
			background: #fff;
			max-height: 80vh;

			.popup-title,
			.popup-header {
				height: 50px;
				line-height: 50px;
				color: #333;
				font-size: 14px;
				text-align: center;
				border-top: 1px solid #eee;
			}

			.popup-header {
				font-size: 16px;
				font-weight: 600;
			}
		}
	}
</style>